<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-white border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
            }
            .nav-item {
                @apply px-4 py-2 rounded-lg transition-all hover:bg-primary/10 cursor-pointer;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .form-input {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
            }
            .badge {
                @apply px-2 py-1 text-xs rounded-full;
            }
            .category-card {
                @apply bg-white rounded-xl overflow-hidden shadow-sm card-hover flex flex-col items-center justify-center p-6 cursor-pointer transition-all;
            }
            .trending-card {
                @apply bg-white rounded-xl overflow-hidden shadow-sm card-hover flex gap-4 p-4 cursor-pointer;
            }
            .stat-card {
                @apply bg-white rounded-xl shadow-sm p-6 text-center;
            }
            .skeleton {
                @apply animate-pulse bg-gray-200 rounded-lg;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">黄淮学院</h1>
                        <p class="text-xs text-info">校园活动管理系统</p>
                    </div>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-2">
                    <a href="index.html" class="nav-item">首页</a>
                    <a href="activities.html" class="nav-item">活动列表</a>
                    <a href="discover.html" class="nav-item nav-item-active">发现</a>
                    <a href="about.html" class="nav-item">关于我们</a>
                </nav>
                
                <!-- 用户操作 -->
                <div class="flex items-center space-x-4">
                    <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-search text-info"></i>
                    </button>
                    <button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all relative">
                        <i class="fa fa-bell text-info"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div id="userMenu" class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg transition-all">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                            <span class="hidden md:inline-block font-medium">游客</span>
                            <i class="fa fa-caret-down text-xs text-info"></i>
                        </button>
                        <!-- 用户下拉菜单 -->
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <a href="login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-sign-in mr-2 text-info"></i>登录
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-plus mr-2 text-info"></i>注册
                            </a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                        <i class="fa fa-bars text-info"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="searchBox" class="container mx-auto px-4 pb-4 hidden">
            <div class="relative">
                <input type="text" placeholder="搜索活动、主办方..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden container mx-auto px-4 pb-4 hidden">
            <nav class="flex flex-col space-y-1">
                <a href="index.html" class="nav-item">首页</a>
                <a href="activities.html" class="nav-item">活动列表</a>
                <a href="discover.html" class="nav-item nav-item-active">发现</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <div class="pt-2 flex space-x-2">
                    <a href="login.html" class="btn-primary flex-1 text-center">登录</a>
                    <a href="register.html" class="btn-secondary flex-1 text-center">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-8">
            <h1 class="text-3xl font-bold mb-2">发现精彩</h1>
            <p class="text-info">为你推荐感兴趣的校园活动</p>
        </section>

        <!-- 个性化推荐 -->
        <section class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">为你推荐</h2>
                <a href="activities.html" class="text-primary hover:underline flex items-center">
                    查看更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 推荐活动卡片 1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1019/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-primary/90 text-white">热门</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">第12届校园科技创新大赛</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 科技学院</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-11-20</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">展示学生科技创新成果，促进学术交流与合作，激发创新思维。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 28</span>
                                <span class="text-xs text-info ml-1">/ 100人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐活动卡片 2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1025/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-warning/90 text-white">新活动</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">校园春季运动会</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 体育部</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-05</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">展现学生体育风采，增强体质，培养团队精神和竞争意识。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 156</span>
                                <span class="text-xs text-info ml-1">/ 500人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐活动卡片 3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1039/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-info/90 text-white">学术</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">大数据技术前沿讲座</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 计算机学院</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-10</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">邀请行业专家分享大数据技术的最新发展趋势和应用案例。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 56</span>
                                <span class="text-xs text-info ml-1">/ 120人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 活动分类 -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold mb-6">活动分类</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <!-- 分类1 -->
                <div class="category-card" style="background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-book text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-1">学术活动</h3>
                    <p class="text-sm text-info">28个活动</p>
                </div>
                
                <!-- 分类2 -->
                <div class="category-card" style="background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);">
                    <div class="w-16 h-16 rounded-full bg-warning/10 flex items-center justify-center mb-4">
                        <i class="fa fa-music text-warning text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-1">文化艺术</h3>
                    <p class="text-sm text-info">15个活动</p>
                </div>
                
                <!-- 分类3 -->
                <div class="category-card" style="background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);">
                    <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mb-4">
                        <i class="fa fa-futbol-o text-success text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-1">体育活动</h3>
                    <p class="text-sm text-info">22个活动</p>
                </div>
                
                <!-- 分类4 -->
                <div class="category-card" style="background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);">
                    <div class="w-16 h-16 rounded-full bg-danger/10 flex items-center justify-center mb-4">
                        <i class="fa fa-users text-danger text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-1">社会实践</h3>
                    <p class="text-sm text-info">19个活动</p>
                </div>
            </div>
        </section>

        <!-- 热门趋势 -->
        <section class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">热门趋势</h2>
                <div class="flex items-center gap-2">
                    <button id="trendingPrev" class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-info hover:bg-primary hover:text-white hover:border-primary transition-all">
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button id="trendingNext" class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-info hover:bg-primary hover:text-white hover:border-primary transition-all">
                        <i class="fa fa-angle-right"></i>
                    </button>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 趋势1 -->
                <div class="trending-card">
                    <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white text-xl font-bold shrink-0">
                        1
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold mb-1">校园歌手大赛总决赛</h3>
                        <p class="text-sm text-gray-600 mb-2 line-clamp-1">学生会主办的年度校园歌手大赛即将迎来总决赛！</p>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-eye mr-1"></i> 3241</span>
                            <span class="mx-3">•</span>
                            <span class="flex items-center"><i class="fa fa-user-o mr-1"></i> 300人已报名</span>
                        </div>
                    </div>
                </div>
                
                <!-- 趋势2 -->
                <div class="trending-card">
                    <div class="w-12 h-12 rounded-full bg-primary/80 flex items-center justify-center text-white text-xl font-bold shrink-0">
                        2
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold mb-1">第12届校园科技创新大赛</h3>
                        <p class="text-sm text-gray-600 mb-2 line-clamp-1">展示学生科技创新成果，促进学术交流与合作。</p>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-eye mr-1"></i> 2876</span>
                            <span class="mx-3">•</span>
                            <span class="flex items-center"><i class="fa fa-user-o mr-1"></i> 72人已报名</span>
                        </div>
                    </div>
                </div>
                
                <!-- 趋势3 -->
                <div class="trending-card">
                    <div class="w-12 h-12 rounded-full bg-primary/60 flex items-center justify-center text-white text-xl font-bold shrink-0">
                        3
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold mb-1">校园春季运动会</h3>
                        <p class="text-sm text-gray-600 mb-2 line-clamp-1">展现学生体育风采，增强体质，培养团队精神。</p>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-eye mr-1"></i> 2458</span>
                            <span class="mx-3">•</span>
                            <span class="flex items-center"><i class="fa fa-user-o mr-1"></i> 344人已报名</span>
                        </div>
                    </div>
                </div>
                
                <!-- 趋势4 -->
                <div class="trending-card">
                    <div class="w-12 h-12 rounded-full bg-gray-400 flex items-center justify-center text-white text-xl font-bold shrink-0">
                        4
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold mb-1">书法作品展</h3>
                        <p class="text-sm text-gray-600 mb-2 line-clamp-1">展示校园书法爱好者的优秀作品，弘扬中华传统文化。</p>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-eye mr-1"></i> 1893</span>
                            <span class="mx-3">•</span>
                            <span class="flex items-center"><i class="fa fa-user-o mr-1"></i> 免费参与</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 即将开始的活动 -->
        <section class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">即将开始</h2>
                <a href="activities.html" class="text-primary hover:underline flex items-center">
                    查看更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div class="space-y-4">
                <!-- 即将开始活动1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all">
                    <div class="flex flex-col md:flex-row">
                        <img src="https://picsum.photos/id/1040/400/300" alt="活动封面" class="w-full md:w-48 h-40 object-cover">
                        <div class="p-4 flex-1 flex flex-col justify-between">
                            <div>
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-bold text-lg">大数据技术前沿讲座</h3>
                                    <span class="badge bg-warning/90 text-white">今日</span>
                                </div>
                                <div class="flex flex-wrap gap-3 mb-2 text-sm text-info">
                                    <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-10 14:00</span>
                                    <span class="flex items-center"><i class="fa fa-map-marker mr-1"></i> 计算机学院报告厅</span>
                                </div>
                                <p class="text-sm text-gray-600 line-clamp-1">邀请行业专家分享大数据技术的最新发展趋势和应用案例。</p>
                            </div>
                            <div class="flex justify-between items-center mt-4">
                                <div class="flex items-center">
                                    <span class="text-danger font-medium">剩余 56</span>
                                    <span class="text-xs text-info ml-1">/ 120人</span>
                                </div>
                                <a href="activity-detail.html" class="btn-primary">立即报名</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 即将开始活动2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all">
                    <div class="flex flex-col md:flex-row">
                        <img src="https://picsum.photos/id/1041/400/300" alt="活动封面" class="w-full md:w-48 h-40 object-cover">
                        <div class="p-4 flex-1 flex flex-col justify-between">
                            <div>
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-bold text-lg">社区服务志愿者招募</h3>
                                    <span class="badge bg-info/90 text-white">明日</span>
                                </div>
                                <div class="flex flex-wrap gap-3 mb-2 text-sm text-info">
                                    <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-11 09:00</span>
                                    <span class="flex items-center"><i class="fa fa-map-marker mr-1"></i> 南门集合</span>
                                </div>
                                <p class="text-sm text-gray-600 line-clamp-1">参与社区服务，传递爱心，为社会贡献自己的一份力量。</p>
                            </div>
                            <div class="flex justify-between items-center mt-4">
                                <div class="flex items-center">
                                    <span class="text-danger font-medium">剩余 32</span>
                                    <span class="text-xs text-info ml-1">/ 50人</span>
                                </div>
                                <a href="activity-detail.html" class="btn-primary">立即报名</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 即将开始活动3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all">
                    <div class="flex flex-col md:flex-row">
                        <img src="https://picsum.photos/id/1042/400/300" alt="活动封面" class="w-full md:w-48 h-40 object-cover">
                        <div class="p-4 flex-1 flex flex-col justify-between">
                            <div>
                                <div class="flex justify-between items-start mb-2">
                                    <h3 class="font-bold text-lg">大学生创业项目路演</h3>
                                    <span class="badge bg-secondary/90 text-white">3天后</span>
                                </div>
                                <div class="flex flex-wrap gap-3 mb-2 text-sm text-info">
                                    <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-13 10:00</span>
                                    <span class="flex items-center"><i class="fa fa-map-marker mr-1"></i> 创业孵化中心</span>
                                </div>
                                <p class="text-sm text-gray-600 line-clamp-1">为创业项目提供展示平台，对接投资人和创业资源。</p>
                            </div>
                            <div class="flex justify-between items-center mt-4">
                                <div class="flex items-center">
                                    <span class="text-danger font-medium">剩余 18</span>
                                    <span class="text-xs text-info ml-1">/ 80人</span>
                                </div>
                                <a href="activity-detail.html" class="btn-primary">立即报名</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 活动统计 -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold mb-6">活动统计</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                <div class="stat-card">
                    <div class="text-3xl font-bold text-primary mb-1">126</div>
                    <div class="text-info">本月活动</div>
                </div>
                <div class="stat-card">
                    <div class="text-3xl font-bold text-secondary mb-1">5,382</div>
                    <div class="text-info">参与人次</div>
                </div>
                <div class="stat-card">
                    <div class="text-3xl font-bold text-success mb-1">42</div>
                    <div class="text-info">主办方</div>
                </div>
                <div class="stat-card">
                    <div class="text-3xl font-bold text-warning mb-1">85%</div>
                    <div class="text-info">满意度</div>
                </div>
            </div>
            
            <!-- 活动类型统计图表 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="font-bold text-lg mb-4">活动类型分布</h3>
                <div class="w-full h-64">
                    <canvas id="activityTypeChart"></canvas>
                </div>
            </div>
        </section>

        <!-- 热门组织者 -->
        <section>
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">热门组织者</h2>
                <a href="#" class="text-primary hover:underline flex items-center">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <!-- 组织者1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-university text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-bold mb-1">科技学院</h3>
                    <p class="text-sm text-info mb-2">24个活动</p>
                    <button class="text-primary text-sm hover:underline">关注</button>
                </div>
                
                <!-- 组织者2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-users text-danger text-2xl"></i>
                    </div>
                    <h3 class="font-bold mb-1">学生会</h3>
                    <p class="text-sm text-info mb-2">18个活动</p>
                    <button class="text-primary text-sm hover:underline">关注</button>
                </div>
                
                <!-- 组织者3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-futbol-o text-success text-2xl"></i>
                    </div>
                    <h3 class="font-bold mb-1">体育部</h3>
                    <p class="text-sm text-info mb-2">15个活动</p>
                    <button class="text-primary text-sm hover:underline">关注</button>
                </div>
                
                <!-- 组织者4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm p-4 text-center card-hover">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fa fa-laptop text-purple-500 text-2xl"></i>
                    </div>
                    <h3 class="font-bold mb-1">计算机学院</h3>
                    <p class="text-sm text-info mb-2">12个活动</p>
                    <button class="text-primary text-sm hover:underline">关注</button>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">黄淮学院</h3>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">校园活动管理系统致力于为全校师生提供便捷的活动信息服务平台。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-all">首页</a></li>
                        <li><a href="activities.html" class="hover:text-white transition-all">活动列表</a></li>
                        <li><a href="discover.html" class="hover:text-white transition-all">发现</a></li>
                        <li><a href="about.html" class="hover:text-white transition-all">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-white transition-all">常见问题</a></li>
                        <li><a href="contact.html" class="hover:text-white transition-all">联系我们</a></li>
                        <li><a href="privacy.html" class="hover:text-white transition-all">隐私政策</a></li>
                        <li><a href="terms.html" class="hover:text-white transition-all">用户协议</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>河南省驻马店市开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>0396-2853611</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-white/10 text-center text-gray-500 text-sm">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化活动类型统计图表
            const ctx = document.getElementById('activityTypeChart').getContext('2d');
            const activityTypeChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['学术活动', '文化艺术', '体育活动', '社会实践', '创新创业', '其他'],
                    datasets: [{
                        data: [30, 20, 22, 15, 8, 5],
                        backgroundColor: [
                            '#165DFF',
                            '#0FC6C2',
                            '#00B42A',
                            '#F53F3F',
                            '#FF7D00',
                            '#86909C'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
            
            // 热门趋势轮播控制
            const trendingPrev = document.getElementById('trendingPrev');
            const trendingNext = document.getElementById('trendingNext');
            
            if (trendingPrev && trendingNext) {
                trendingPrev.addEventListener('click', function() {
                    console.log('上一页');
                    // 这里可以添加轮播功能的实现
                });
                
                trendingNext.addEventListener('click', function() {
                    console.log('下一页');
                    // 这里可以添加轮播功能的实现
                });
            }
            
            // 分类卡片点击事件
            const categoryCards = document.querySelectorAll('.category-card');
            categoryCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 获取分类名称
                    const categoryName = this.querySelector('h3').textContent;
                    console.log('点击了分类：', categoryName);
                    // 可以跳转到对应的活动列表页面并带上分类参数
                    window.location.href = `activities.html?category=${encodeURIComponent(categoryName)}`;
                });
            });
            
            // 热门趋势卡片点击事件
            const trendingCards = document.querySelectorAll('.trending-card');
            trendingCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 跳转到活动详情页
                    window.location.href = 'activity-detail.html';
                });
            });
        });
    </script>
</body>
</html>